<template>
  <div class="cc_box">
    <div class="cc_update"><el-button type="primary" class="cc_btn1" @click="showF()">添加课程</el-button></div>
    <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="250"
          border
          >
          <el-table-column
            fixed
            prop="c_id"
            label="课程编号"
            width="250">
          </el-table-column>
          <el-table-column
            prop="c_name"
            label="课程名"
            width="220">
          </el-table-column>
          <el-table-column
            prop="teacher_name"
            label="授课老师"
            width="250">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="open_q()">
                查看评论区
              </el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small">
                移除
              </el-button>
            </template>
          </el-table-column>
         </el-table>
         </div>
    <div class="cc_form" v-if="showForm">
        <el-form ref="form" :model="form" label-width="80px">
           <el-form-item label="课程编号">
             <el-input v-model="form.id"></el-input>
           </el-form-item>
           <el-form-item label="课程名">
             <el-input v-model="form.name"></el-input>
           </el-form-item>
           <el-form-item label="授课老师">
             <el-input v-model="form.teacher"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">立即创建</el-button>
             <el-button @click="cancelF()">取消</el-button>
           </el-form-item>
        </el-form>
    </div>
    <div class="cc_form1" v-if="showq">
        <ul>
          <li class="q_content">123</li>
          <li class="q_content">123</li>
        </ul>
        <el-button type="primary" @click="close_q()">关闭</el-button>
    </div>
   </div>
</template>

<script>
export default {
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      onSubmit() {
        console.log('submit!');
      },
      showF(){
        this.showForm = true
      },
      cancelF(){
        this.showForm = false
      },
      //查看评论区
      open_q(){
        this.showq = true
      },
      close_q(){
        this.showq = false
      }
    },
    data() {
      return {
        tableData: [{
          c_id: '12',
          c_name: 'Java',
          teacher_name: '李四',
        }],
        form: {
          c_id:'',
          c_name: '',
          teacher_name:'',
        },
        showForm : false,
        showq:false
      }
    },

}
</script>

<style lang="scss" scoped>
  .cc_box{
    width: 100%;
    min-height: 500px;
    background-color: #f6f6f4;
    position: relative;
    .cc_update{
       position: relative;
       width: 100%;
       height: 80px;
       .cc_btn1{
        position: absolute;
        top: 10px;
        right: 20px;
       } 
    }
    .table{
       padding:10px;
    }
    .cc_form{
       position: absolute; 
       width: 50%;
       min-height: 350px;
       padding: 40px;
       box-sizing: border-box;
       background-color: white;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
       z-index: 100;
       border-radius: 10px;
    }
    .cc_form1{
       position: absolute; 
       width: 50%;
       min-height: 350px;
       padding: 40px;
       padding-bottom: 60px;
       box-sizing: border-box;
       background-color: white;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
       z-index: 100;
       border-radius: 10px;
       .q_content{
        height: 30px;
        line-height: 30px;
        margin-bottom: 10px;
        border:1px solid #ccc;
        border-radius: 10px;
        padding-left: 20px;
        box-sizing: border-box;
        font-size: 14px;
       }
       button{
        position: absolute;
        bottom: 10px;
        left: 45%;
       }
    }
  }
</style>